<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2.css" type="text/css">
    <style>
        /* 
        p{
            color: red;
        } 
        */

        #para1 {
            color: red;
        }

        .demo {
            color: aqua;
        }
        .ps {
            font-size: 30px;
        }

        .fs12 {
            font-size: 12px;
        }

        .fs20 {
            font-size: 20px;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 
    盒子
    width: ;
    height: ;
    backgroud-color: ;  (快捷bgc)
    -->

    <div>div盒子</div>

    <!-- 
        css选择器
        选择要添加样式的html标签的一种方法 模式。
        css2.1 选择器
            ·标签选择器 选择的是所有同名标签 不看嵌套关系 不能单独添加特殊样式
            ·id选择器 根据id属性选择标签 只能选择一个标签
·               严格区分大小写，只能是唯一的，不允许多选
            ·类选择器 class属性去选择标签
                .class属性值 严格区分大小写 class可以与其他的class相同 可以添加多个class
                节省代码量 类上样式css id上JavaScript
            ·通配符选择器 * {} 全局统一改变 简化书写 选择效率低 会做无用的工作 实际上线网页不会使用
                * {
                  margin：0;
                  padding: 0;
                }
    -->
    <!-- id选择器 -->
    <p id="para1">aaa</p>
    <p id=“para2”>aaa</p>
    <!-- 同名id不能同时赋予两个p标签 -->
    <p>aaa</p>

    <h3 class="demo">aaa</h3>
    <p class="demo">aaa</p>
    <p class="demo ps">aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <P class="fs12 red">aaaaa</P>
    <P class="fs20 green">aaaaa</P>

    
</body>
</html>